<template>
	<!-- 启动检查时的加载状态 -->
	<view v-if="isChecking" class="loading">
		<u-loading-icon size="40" mode="circle"></u-loading-icon>
	</view>

	<!-- 主内容区 -->
	<view v-else class="container">
		<!-- 导航栏 -->
		<view class="nav-bar">
			<view class="nav-title">推荐咨询师</view>
			<view class="more-btn" @click="navigateToList">
				<text>更多咨询师</text>
				<u-icon name="arrow-right" size="24" color="#6c8eef"></u-icon>
			</view>
		</view>

		<!-- 咨询师列表 -->
		<view class="consultant-list">
			<view v-for="(item, index) in consultants" :key="index" class="consultant-card">
				<view class="card-header">
					<view class="avatar-container">
						<u-image :src="item.avatar" width="120rpx" height="120rpx" shape="circle"></u-image>
						<view class="rating-badge" v-if="item.rating">
							<u-icon name="star-fill" color="#FFD700" size="24"></u-icon>
							<text>{{item.rating}}</text>
						</view>
					</view>
					<view class="info-container">
						<view class="name-row">
							<text class="name">{{ item.name }}</text>
							<view class="tags">
								<text class="tag" v-for="(tag, tagIndex) in item.tags" :key="tagIndex">{{tag}}</text>
							</view>
						</view>
						<view class="expertise">
							<text class="label">擅长：</text>
							<text class="value">{{ item.expertise }}</text>
						</view>
						<view class="experience">
							<text class="label">从业经验：</text>
							<text class="value">{{ item.experience || 0 }}年</text>
						</view>
					</view>
				</view>
				<view class="card-footer">
					<button class="appointment-btn" @click="handleAppointment(item)">
						<u-icon name="calendar" size="24" color="#ffffff"></u-icon>
						<text>立即预约</text>
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isChecking: true,
			consultants: [],
		}
	},
	async onLoad(options) {
		const token = uni.getStorageSync('uni_id_token');
		if (!token) {
			uni.redirectTo({
				url: '/uni_modules/uni-id-pages/pages/login/login-withoutpwd'
			});
			return;
		}

		await this.loadConsultants();
		this.isChecking = false;
	},
	methods: {
		async loadConsultants() {
			try {
				const res = await uniCloud.callFunction({
					name: 'getConsultants'
				});
				console.log(res)
				let allConsultants = res.result.data.consultants || [];
				
				// 按评分排序，降序排列
				allConsultants.sort((a, b) => (b.rating || 0) - (a.rating || 0));
				
				// 只取评分最高的两位作为首页展示
				this.consultants = allConsultants.slice(0, 2);
				
			} catch (error) {
				console.error('获取咨询师数据失败:', error);
			}
		},

		navigateToList() {
			uni.navigateTo({
				url: '/pages/consultants/full-list'
			});
		},

		handleAppointment(consultant) {
			uni.navigateTo({
				url: `/pages/appointment/appoint?uniIdToken=${consultant.uniIdToken}`
			});
		}
	}
}
</script>

<style lang="scss">
/* 全局变量 */
:root {
	--primary-color: #6c8eef;
	--primary-hover: #5a7de0;
	--secondary-color: #f8f9fa;
	--text-color: #2c3e50;
	--border-color: #dee2e6;
	--shadow-sm: 0 4rpx 8rpx rgba(0,0,0,0.05);
	--shadow-md: 0 8rpx 12rpx rgba(0,0,0,0.1);
	--shadow-lg: 0 16rpx 32rpx rgba(0,0,0,0.1);
	--radius-sm: 16rpx;
	--radius-md: 24rpx;
	--radius-lg: 32rpx;
	--spacing-sm: 16rpx;
	--spacing-md: 32rpx;
	--spacing-lg: 48rpx;
}

/* 启动加载样式 */
.loading {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	width: 100%;
	background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

/* 主内容区样式 */
.container {
	min-height: 100vh;
	background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
	padding: 30rpx;
}

.nav-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 40rpx;
	padding: 0 20rpx;

	.nav-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #2c3e50;
		position: relative;
		padding-left: 20rpx;

		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 8rpx;
			height: 32rpx;
			background: #6c8eef;
			border-radius: 4rpx;
		}
	}

	.more-btn {
		display: flex;
		align-items: center;
		gap: 8rpx;
		padding: 12rpx 24rpx;
		background: rgba(108, 142, 239, 0.1);
		border-radius: 30rpx;
		transition: all 0.3s ease;

		text {
			font-size: 26rpx;
			color: #6c8eef;
		}

		&:active {
			background: rgba(108, 142, 239, 0.2);
			transform: translateY(-2rpx);
		}
	}
}

.consultant-list {
	display: flex;
	flex-direction: column;
	gap: 30rpx;
}

.consultant-card {
	background: white;
	border-radius: 24rpx;
	padding: 30rpx;
	box-shadow: 0 8rpx 16rpx rgba(108, 142, 239, 0.1);
	transition: all 0.3s ease;

	&:active {
		transform: translateY(-2rpx);
		box-shadow: 0 12rpx 24rpx rgba(108, 142, 239, 0.2);
	}
}

.card-header {
	display: flex;
	gap: 30rpx;
	margin-bottom: 30rpx;
}

.avatar-container {
	position: relative;
	width: 120rpx;
	height: 120rpx;

	.rating-badge {
		position: absolute;
		bottom: 0;
		right: 0;
		background: white;
		padding: 4rpx 12rpx;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.1);
		display: flex;
		align-items: center;
		gap: 4rpx;

		text {
			font-size: 24rpx;
			color: #f0ad4e;
			font-weight: 500;
		}
	}
}

.info-container {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 12rpx;
}

.name-row {
	display: flex;
	align-items: center;
	gap: 16rpx;

	.name {
		font-size: 32rpx;
		font-weight: 600;
		color: #2c3e50;
	}

	.tags {
		display: flex;
		gap: 8rpx;
		flex-wrap: wrap;
	}

	.tag {
		font-size: 22rpx;
		color: #6c8eef;
		background: rgba(108, 142, 239, 0.1);
		padding: 4rpx 12rpx;
		border-radius: 16rpx;
	}
}

.expertise, .experience {
	font-size: 26rpx;
	color: #666;
	line-height: 1.4;

	.label {
		color: #999;
	}

	.value {
		color: #2c3e50;
	}
}

.card-footer {
	margin-top: 20rpx;
	padding-top: 20rpx;
	border-top: 2rpx solid rgba(108, 142, 239, 0.1);
}

.appointment-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8rpx;
	width: 100%;
	height: 80rpx;
	background: linear-gradient(135deg, #6c8eef 0%, #5a7de0 100%);
	border-radius: 40rpx;
	border: none;
	color: white;
	font-size: 28rpx;
	font-weight: 500;
	transition: all 0.3s ease;

	&:active {
		transform: translateY(-2rpx);
		box-shadow: 0 8rpx 16rpx rgba(108, 142, 239, 0.2);
	}
}

@media screen and (min-width: 690px) {
	.container {
		max-width: 800rpx;
		margin: 0 auto;
	}
}
</style>
